<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div></div>

    <script>

        // 添加内容
        //   innerHTML = ''


        // 创建标签  document.createElement(标签的名字)
        // 创建文本  document.createTextNode(文本的内容)
        // 添加子元素  
        //     appendChild()    插入到后面
        //     insertBefore()   插入到指定的子元素的前面


        var oDiv = document.querySelector('div');

        // 这是把内容当做字符串来看的
        // oDiv.innerHTML = '<p>111</p>';


        // 创建一个p标签
        var oP = document.createElement('p');
        console.log(oP);

        // 创建文本节点
        var oText = document.createTextNode('666');

        // 文本插入到p标签中去
        oP.appendChild(oText);

        // 把p标签插入到div中去

        oDiv.appendChild(oP);

        // 创建一个p标签
        var oH2 = document.createElement('h2');
        // console.log(oP);

        // 创建文本节点
        var oText = document.createTextNode('999');

        // 文本插入到p标签中去
        oH2.appendChild(oText);
        // oDiv.appendChild(oH2);

        // 插入到指定的子元素的前面
        oDiv.insertBefore(oH2, oP);

    </script>

</body>

</html>